<template>
  <el-row class="panel-group" :gutter="40">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <el-card class="card-panel ">
        <div class="icon-people">
          <Promotion style="width: 5em; height: 5em; margin-right: 8px" />
          <div class="card-panel-description">用户数</div>
        </div>
        <div class="card-panel-num">666</div>

      </el-card>

    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <el-card class="card-panel">
        <div class="icon-app">
          <Promotion style="width: 5em; height: 5em; margin-right: 8px" />
          <div class="card-panel-description">应用数</div>
        </div>
        <div class="card-panel-num">6666</div>

      </el-card>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <el-card class="card-panel">
        <div class="icon-server">
          <Promotion style="width: 5em; height: 5em; margin-right: 8px" />
          <div class="card-panel-description">主机数</div>
        </div>
        <div class="card-panel-num">6</div>

      </el-card>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" />
      <el-card class="card-panel">
        <div class="icon-crontab">
          <Promotion style="width: 5em; height: 5em; margin-right: 8px" />
          <div class="card-panel-description">定时任务</div>
        </div>
        <div class="card-panel-num">666</div>

      </el-card>
    </el-col>
  </el-row>

</template>





<style>
.panel-group {
  margin-top: 18px;
}

.card-panel-col {
  margin-bottom: 32px;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 2px;
  min-height: 2px;
  /* background-color:black; */
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}

.icon-people {
  color: #40c9c6;
}

.icon-app {
      color: #36a3f7;
    }
.icon-server {
      color: #f4516c;
    }
.icon-crontab {
      color: #109b00;
    }


.card-panel-description {
  float: right;
  font-weight: bold;
  margin-top: 10px;
  color: gray;
  margin-right: 10px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: bold;
  float: right;
  color: black;
  margin-right: 10px;
  margin-top: -30px;
}
</style>





